<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;font-family:'microsoft yahei',SimSun}
		li,ul{list-style:none}
		a{text-decoration:none;outline:0;color:inherit}
		img{border:none;vertical-align:middle}
		button,input,select,textarea{outline:0;border:none;color:inherit;font-size:inherit}
		.btn{display:inline-block;padding:0 22px;height:35px;line-height:35px;background:#009688;color:#fff;font-size:15px;cursor:pointer;vertical-align:middle;border-radius:2px}
		.btn:hover{opacity:1;filter:alpha(opacity=100)}
		.btn:active{opacity:.9;filter:alpha(opacity=90)}
	</style>
	<script type="text/javascript">
		;(function(undefined) {
			"use strict";
    		var _global;
			function myPlugin(text){
				this.init(text);
			}
			myPlugin.prototype={
				constructor:this,
				init:function(text){
					this.ele=$('<div/>');
					this.ele.css({position:'fixed',top:'-200px',width:'100%',left:0,background:'#f40',color:'#fff','line-height':'50px',height:'50px','text-align':'center','font-size':'16px'});
					this.ele.html(text);
					$('body').append(this.ele);
					this.anim(this.ele);
				},
				anim:function(obj){
					obj.animate({'top':0});
				},
				hide:function(){
					var this_=this;
					this.ele.animate({top:'-200px'},function(){
						this_.ele.remove();
					});
				}
			};
			//其实，我们觉得直接传window对象进去，我觉得还是不太妥当。我们并不确定我们的插件就一定用于浏览器上，也有可能使用在一些非浏览端上。所以我们还可以这么干，我们不传参数，直接取当前的全局this对象为作顶级对象用。
			// 最后将插件对象暴露给全局对象
		    _global = (function () {
		        return this || (0, eval)('this');
		    }());
		    if (typeof module !== "undefined" && module.exports) {
		        module.exports = myPlugin;
		    } else if (typeof define === "function" && define.amd) {
		        define(function () {
		            return myPlugin;
		        });
		    } else {
		        !('myPlugin' in _global) && (_global.myPlugin = myPlugin);
		    }
		}());
	</script>
	<script>
		function verify(obj,n){
			if(n==3){
				alert('step3 验证短信')
			}
			obj.add(n)
		}
		var myFun={
			txt:function(){
				return 'step'
			},
			pswd:function(t){
				alert(t+'验证密码')
			},
			name:function(t){
				alert(t+'验证姓名')
			},
			add:function(n){
				var txt=this.txt()+n+' '
				if(n==1){
					this.name(txt)
				}else if(n==2){
					this.pswd(txt)
				}
			}
		}
	</script>
</head>
<body>
	<div class="wrap" style="text-align: center;margin-top: 50px;">
		<input type="button" value="隐藏" class="btn" id="hide">
		<input type="button" value="验证" class="btn" id="verify">
	</div>
	<script>
		var plugin=new myPlugin('顶部提示信息');
		$('#hide').click(function(){
			if($(this).val()=='隐藏'){
				plugin.hide();
				$(this).val('显示');
			}else{
				plugin=new myPlugin('顶部提示信息');
				$(this).val('隐藏');
			}
		});
		var n=0;
		$('#verify').click(function(){
			n++;
			n= n==4 ? 1 : n;
			verify(myFun,n);
		});
	</script>
</body>
</html>